<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="kangbazi" id="box">
        hello 
        <p>p1</p>
        <!-- 我是注释节点 -->
        <p>p2</p>
        world
    </div>


    <script>
        // var divele = document.querySelector('div');
        // console.log(divele.childNodes);

        // var divele = document.querySelector('div');
        // console.log(divele.childNodes);
        // //属性节点 
        // var attr = divele.attributes[0];
        // // console.log(attr)
        // // 文本节点
        // var texts = divele.childNodes[0];
        // console.log(texts);
        // // 注释节点 
        // var comment = divele.childNodes[3];
        // console.log(comment);


        //nodetype 

        // console.log('元素节点',divele.nodeType);
        // console.log('属性节点',attr.nodeType);
        // console.log('文本节点',texts.nodeType);
        // console.log('注释节点',comment.nodeType);

        // 我想拿到注释节点  
        // 确保拿到的是注释节点  可以通过 if(节点.nodeType == 8)来判断 

        // nodeName
        // console.log('元素节点',divele.nodeName); // <div></div>  DIV
        // console.log('属性节点',attr.nodeName); // 属性名  class
        // console.log('文本节点',texts.nodeName);// #text
        // console.log('注释节点',comment.nodeName);// #comment

        // nodeValue
        // console.log('元素节点',divele.nodeValue); // null <div></div> 仅仅是标签
        // console.log('属性节点',attr.nodeValue); // 属性名对应的值
        // console.log('文本节点',texts.nodeValue);// 文本本身
        // console.log('注释节点',comment.nodeValue);// #注释内容本身




        // 如果我现在想获取某一个属性的值  


        // 1 
        var divele = document.querySelector('div');
        console.log(divele.className);


        // 2
        console.log(divele.attributes[0].nodeValue)


    </script>
</body>
</html>